import { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

function useEffectTest(props) {
  const [ count, setCount ] = useState(0);
  
  // 组件挂在完成之后执行，组件数据更新完成之后执行
  // useEffect(() => {
  //   console.log(123);
  // });

  // 组件挂载完成之后执行
  // useEffect(() => {
  //   console.log(123);
  // }, []);

  // 组件被卸载之前执行
  // useEffect(() => {
  //   return () => {
  //     console.log('组件被卸载了');
  //   }
  // });

  // useEffect(() => {
  //   const onScroll = () => {
  //     console.log('页面滚动了...');
  //   }
  //   window.addEventListener('scroll', onScroll);
  //   return () => {
  //     window.removeEventListener('scroll', onScroll);
  //     // console.log('组件被卸载了1');
  //   }
  // });

  // useEffect(() => {
  //   const timerId = setInterval(() => {
  //     const newCount = count + 1;
  //     document.title = newCount;
  //     setCount(newCount);
  //   }, 1000);
  //   return () => {
  //     clearInterval(timerId);
  //     // console.log('组件被卸载了2');
  //   }
  // });


  /**
   * useEffect 钩子函数执行异步操作
   */
  // useEffect(async () => {
  //   const result = await getData();
  //   console.log(result);
  // });

  useEffect(() => {
    (async ()=>{
      const result = await getData();
      console.log(result);
    })();
  });

  function getData() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('getData result');
      }, 200);
    })
  }

  return (
    <div>
      <span>{count}</span>
      <button onClick={()=>setCount(count+1)}>+1</button>
      <button onClick={()=>ReactDOM.unmountComponentAtNode(document.getElementById('root'))}>卸载组件</button>
    </div>
  );
} 

export default useEffectTest;
